<template>
<!-- 个人中心 -->
  <div class="home">
    <menuBar></menuBar>
    <div class="personalCenter">
        <headPortrait ref="headPortraitRef" class="headPortrait"></headPortrait>
        <div class="page">
            <div class="headerBorder">
            </div>

            <div class="content">
                <div class="topContent">
                    <div class="head">
                        <div class="cover">
                          <uploadFile ref="uploadImgRef" style="" v-if="state.headEdit" :fileList="state.userInfo.fileList" ></uploadFile>
                          <img v-if="!state.headEdit" :src="state.userInfo.avatar" >
                        </div>
                        <div class="rightInfo">
                            <div class="name">
                              <el-input :disabled="!state.headEdit" style="width: 80px;" size="small" v-model="state.userInfo.nickname">
                              </el-input>
                              <img v-if="!state.headEdit" @click="state.headEdit=!state.headEdit" src="@/assets/img/writer/edit.png" />
                             <div v-if="state.headEdit" @click="submitUserInfo" class="btn">
                                  完成
                              </div>
                            </div>
                            <div class="date">注册日期：2021-05-06</div>
                        </div>
                    </div>
                    <div class="earningsArr">
                        <div class="earningsItem" v-for="(item,index) in state.earningsArr" :key="index">
                          <div class="val">
                            {{item.val}}
                          </div>
                          <div class="label">
                            {{item.label}}
                          </div>
                        </div>
                        <div class="btn">
                            提现
                        </div>
                    </div>
                </div>
                <div class="changeLabel">
                    <div  @click="changeLabel(index)" :class="state.changeIndex==index  ?'activeChangeItem changeItem' : 'changeItem'" v-for="(item,index) in state.changeLabel" :key="index">
                        {{item}}
                    </div>
                </div>
                <div class="bottomContent">

                    <div class="form">
                       <div class="formItem">
                            <div class="label">姓名</div>
                            <el-input :disabled="state.edited" style="width: 392px;" size="small" v-model="state.formObj.name"></el-input>
                        </div>
                        <div class="formItem">
                            <div class="label">手机号</div>
                            <el-input :disabled="state.edited" style="width: 392px;" size="small" v-model="state.formObj.phone"></el-input>
                        </div>
                       <div class="formItem">
                            <div class="label">收款方式</div>
                            <el-input :disabled="state.edited" style="width: 392px;" size="small" v-model="state.formObj.paymentTerm"></el-input>
                        </div>
                        <div class="formItem">
                          <div class="item">
                            <div class="itemLabel">开户行</div>
                            <el-input :disabled="state.edited" size="small" style="margin-left: 12px;" v-model="state.formObj.openingBank"></el-input>
                          </div>
                          <div class="item">
                            <div class="itemLabel">开户账号</div>
                            <el-input :disabled="state.edited" size="small"  v-model="state.formObj.openingAccount"></el-input>
                          </div>
                          <div class="item">
                            <div class="itemLabel">开户姓名</div>
                            <el-input :disabled="state.edited" size="small" v-model="state.formObj.openingName"></el-input>
                          </div>

                        </div>
                        <div class="formItem">
                            <div class="label">身份证</div>
                            <!-- <div class="input"></div> -->
                        </div>
                        <div class="formItem">
                            <div class="label">账号</div>
                            <el-input :disabled="state.edited" style="width: 392px;" size="small" v-model="state.formObj.account"></el-input>
                        </div>
                        <div class="formItem">
                            <div class="label">账号密码</div>
                            <el-input :disabled="state.edited" type="password" style="width: 392px;" size="small" v-model="state.formObj.password"></el-input>
                        </div>
                    </div>
                </div>

                <div class="bottomBtn">
                    <div class="item" v-if="state.edited" @click="state.edited=false">
                      <img src="@/assets/img/writer/editActive.png" >
                        <span class="btn">
                            编辑
                        </span>
                    </div>
                    <div class="item finshBtn" style="" v-if="!state.edited" @click="submitFrom">
                        完成
                    </div>


                </div>
            </div>

        </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive,inject,onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import menuBar from './component/menuBar'
import headPortrait from './component/headPortrait'
import uploadFile from '@/components/uploadFile/uploadFile'
const state = reactive({
    headEdit :false,
    changeLabel:[
      '个人信息',
      '提现记录',
    ],
    earningsArr:[
      {
        label:'总收益',
        val:568,
      },
      {
        label:'已提现',
        val:68,
      },
      {
        label:'可提现',
        val:500,
      },
    ],
    changeIndex: 0 ,
    userInfo:{
      nickname:'',
      fileList:[],
      avatar:''
    },
    formObj:{
      name:'寒寒',
      phone:'111111111',
      paymentTerm:'银行卡',
      openingBank:'某某支行',
      openingAccount:'426454681878787',
      openingName:'寒寒',
      identityCardPicture:[],
      account:'zhoyonghang',
      password:'123456'
    },
    rules:[],
    edited:true,
  });
export default {
  name: 'personalCenter',
  components: {
    menuBar,
    headPortrait,
    uploadFile
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      const echarts = inject("ec");//引入
      function changeLabel(_index){
        state.changeIndex = _index
      };
      function submitFrom(){
        state.edited = true
      }
      function getUserInfo(){
        _this.$request({
          url:'/api/pcLogin/get_admininfo'
        }).then(res=>{
          console.log(res);
          if (res.code==1) {
            state.userInfo.fileList = []
            state.userInfo.avatar =  res.data.avatar
            state.userInfo.nickname = res.data.nickname
            let imgItem = {
              name:'avatar.png',
              url:res.data.avatar
            }
            state.userInfo.fileList.push(imgItem)
          }
        })
      }
      function submitUserInfo(){
        // console.log( ctx.refs.uploadAvatarRef.state.uploadFileList);
        let uploadFileListItem = ctx.refs.uploadImgRef.$refs.uploadRef.uploadFiles[0]

        let avatar = uploadFileListItem.response ? uploadFileListItem.response.data.url : uploadFileListItem.url

        let nickName = ctx.refs.headPortraitRef.state.userInfo.nickname
       if(avatar==state.userInfo.avatar && nickName == state.userInfo.nickname ){
         return state.headEdit=!state.headEdit
       }

        let data ={
          nickname : state.userInfo.nickname,
          avatar
        }
        // console.log(data);
        _this.$request({
          url:'/api/pcLogin/change_admin',
          data
        }).then(res=>{
          if(res.code == 1){
            state.headEdit=!state.headEdit
            _this.$message.success(res.msg)
            getUserInfo()
            ctx.refs.headPortraitRef.getUserInfo()
          }else{
            _this.$message.error(res.msg)
          }
        })
      }
      onMounted(()=>{
        getUserInfo()
      });
      onActivated(()=>{
        state.headEdit=false
      })
      return{
        state,changeLabel,submitFrom,getUserInfo,submitUserInfo
      }
  },
  data () {
    return {
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  },
}
</script>
<style lang="scss" scoped>
  /deep/  .el-input.is-disabled .el-input__inner{
    cursor: auto;
    color: #606266;
    background-color: #fff;
    border: 1px solid transparent;
    box-sizing: border-box;
  }
  @media screen and (max-width: 1000px) {
       .home{
         .personalCenter{
           width: 100% !important;
         }
       }

  }

    .home{
      display: flex;
      // height: 100vh;
      width: 100%;
      .personalCenter{
        width: calc( 100% - 255px );
        position: relative;
       .page{
          position: absolute;
          top: 10%;
          left: 2.5%;
          height: 85vh;
          // overflow: hidden;
          width: 95%;
          border-radius: 10px;
          .headerBorder{
            position: relative;
            &:after{
              content: '';
              height: 1px;
              width: 102.6%;
              position: absolute;
              opacity: 0.5;
              top: 0;
              left: 0;
              background-color: #ffff;
            }
          }
          .content{
            box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
            margin-top: 15px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            width: 100%;
            // height: 110%;
            border-radius: 8px;
            .topContent {
              height: 30%;
              min-height: 240px;
              .head {
                display: flex;
                align-items: center;
                padding: 26px 23px 0;
                width: 80%;
                .cover {
                  display: flex;
                  /deep/ .el-upload-list__item {
                    width: 120px;
                    height: 120px;
                  }
                  /deep/ .el-upload--picture-card{
                    width: 120px;
                    height: 120px;
                  }
                  img {
                    width: 120px;
                    height: 120px;
                    border-radius: 8px;
                  }
                }

                .rightInfo {
                  margin-left: 13px;
                  height: 100px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-evenly;
                  .name {
                    color: #17181A;
                    font-size: 18px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    img {
                      cursor: pointer;
                      margin-left: 18px;
                      width: 18px;
                      height: 18px;
                    }
                    .btn{
                      padding: 5px 8px;
                      border-radius: 5px;
                      border: 1px solid #F0F0F0;
                      margin-left: 20px;
                      cursor: pointer;
                      background: linear-gradient(81deg, #4977FC, #9AC9FE);
                      color: #fff;
                      display: grid;
                      place-items: center;
                    }
                  }

                  .date {
                    color: #8A9099;
                  }
                }

              }

              .earningsArr{
                display: flex;
                align-items: center;
                height: 100px;
                .earningsItem{
                  margin: 0 60px 0 30px;
                  .label{
                    font-size: 14px;
                    color: #8A9099;
                    margin-bottom: 3px;
                  }
                  &:nth-child(2) .val{
                    color: #111A33;
                  }
                  .val{
                    color: #547FF9;
                    font-size: 26px;
                  }
                }
                .btn{
                  height: 32px;
                  width: 88px;
                  background: linear-gradient(81deg, #4977FC, #9AC9FE);
                  border-radius: 6px;
                  color: #fff;
                  display: grid;
                  place-items: center;
                }
              }

            }

            .changeLabel {
              // height: 9%;
              height: 50px;
              display: flex;
              background-color: #F4F4F4;
              align-items: center;
              .changeItem {
                color: #1C1A1D;
                font-size: 18px;
                padding: 0 70px 0 30px;
                cursor: pointer;
              }
              .activeChangeItem{
               position: relative;
                &::before{
                  content: '';
                  height: 2px;
                  width: 30px;
                  background-color: #4977FC;
                  position: absolute;
                  bottom: -15%;
                  left: 27%;
                }
              }
            }

             .bottomContent {
               height: 50%;
               padding: 20px 20px 0 20px;
               .form {
                 display: flex;
                 flex-direction: column;
                 justify-content: space-evenly;
                 height: 100%;
                 .formItem {
                   display: flex;
                   align-items: center;
                   height: 50px;
                   .item{
                    //  flex: 1;
                     display: flex;
                     align-items: center;
                    //  margin-right: 5vw;
                     .itemLabel{
                       color: #8A9099;
                       width: 113px;
                     }
                   }
                   .label {
                    color: #8A9099;
                    width: 90px;
                   }

                   .input {

                   }
                 }
               }
             }

            .bottomBtn{
                height: 40px;
                margin:11px 0 ;
                padding-left: 15%;
                color: #4B79FC;
                display: flex;
                align-items: center;
                .item{
                  cursor: pointer;
                  img{
                    width: 20px;
                    height: 20px;
                    margin-right: 11px;
                  }
                }
                .finshBtn{
                  width: 78px;
                  height: 38px;
                  background: #E3EAFF;
                  border-radius: 4px;
                  color: #4B79FC;
                  display: grid;
                  place-items: center;
                }
            }
          }
        }
      }
    }
</style>
